<template>
  <div>
    <!-- v-model 基于 value 进行的封装，数据驱动视图 -->
    <!-- 1.1 input 标签 -->
    人生格言：<input type="text" placeholder="占位提示..." v-model="message" />
    <br />
    <!-- 2. select 标签 -->
    来自哪里：
    <select v-model="city">
      <option value="广州市">广州</option>
      <option value="北京市">北京</option>
      <option value="上海市">上海</option>
    </select>
    <br />
    <!-- 1.2. input 单选按钮，复选按钮 -->
    性别：
    <label><input type="radio" name="gender" value="男" v-model="sex" /> 男</label>
    <label><input type="radio" name="gender" value="女" v-model="sex" /> 女</label>
    <br />
    爱好：
    <label><input v-model="hobby"  type="checkbox" value="吃饭" />吃饭</label>
    <label><input v-model="hobby" type="checkbox" value="碎觉" />碎觉</label>
    <label><input v-model="hobby" type="checkbox" value="打代码" />打代码</label>
    <!-- 🧨1.3 复选框特殊情况 -->
    <br />
    <label><input v-model="isCheck" type="checkbox" /> 我已阅读协议，并同意</label>
    <br />
    自我介绍：
    <!-- 3. 文本域 -->
    <textarea v-model="intro" placeholder="说些什么吧~"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      city: '北京市',
      // vue 注重的都是数据的操作，不是 DOM 的操作
      sex: '男',
      // 💥数组复选框，爱好可以选择多个，需要写成数组收集用户数据
      hobby: ['打代码'],
      // 复选框情况2，获取布尔值
      isCheck: false,
      intro: '',
    }
  },
}
</script>

<style></style>
